<template>
  <div class="charts">
    <p class="c-title">智能设备运营驾驶舱</p>
    <div class="full" @click="info"><dv-border-box-12 >全屏</dv-border-box-12></div>
    <div class="top-border">
      <dv-decoration-8 style="width:300px;height:40px;margin-top:-45px" />
      <dv-decoration-5 :dur="5" style="width:600px;height:40px;margin:-30px auto" />
      <dv-decoration-8 :reverse="true" style="width:300px;height:40px;margin-top:-45px" />
    </div>
    <div class="charts-all">
      <el-row :gutter="15">
        <el-col :span="6">
          <div class="box-a">
            <div class="box1">
              <dv-border-box-13>
                <div class="charts-title"><span>>></span>预防性维修占比（PM）</div>
                <div class="PM"><e-charts class="charts1" autoresize :option="option" /></div>
              </dv-border-box-13>
            </div>
            <div class="box2">
              <dv-border-box-13>
                <div class="chats-a">
                  <div class="charts-title"><span>>></span>设备故障停线时间及次数</div>
                  <div class="PM"><e-charts style="width: 110%;height: 23vh;margin-top: 1vh" autoresize :option="option14" /></div>
                  <div class="charts-title"><span>>></span>设备故障停线时间及费用</div>
                  <div class="PM"><e-charts style="width: 110%;height: 23vh;" autoresize :option="option15" /></div>
                </div>
              </dv-border-box-13>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="box-b">
            <div class="box3">
              <dv-border-box-8 :dur="10">
                <div class="m-title"><h1>设备年度总维修费用 <span>2</span><span>5</span><span>3</span><span>4</span><b>万元</b></h1></div>
                <div class="chart-a"><e-charts style="height: 33vh;width: 98%" autoresize :option="option3" /></div>
              </dv-border-box-8>
            </div>
            <div class="box4">
              <dv-border-box-13>
                <div class="charts-title"><span>>></span>预防计划完成率</div>
                <div class="chart-a"><e-charts style="height: 30vh;width: 100%" autoresize :option="option4" /></div>
              </dv-border-box-13>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="box-c">
            <div class="box5">
              <dv-border-box-13>
                <div class="chats-b">
                  <div class="charts-title"><span>>></span>MTBF</div>
                  <div class="chart-a"><e-charts style="height: 20vh;width:95%;margin-top: -2%" autoresize :option="option5" /></div>
                </div>
                <div class="chats-b">
                  <div class="charts-title"><span>>></span>MTTR</div>
                  <div class="chart-a"><e-charts style="height: 20vh;width:95%;margin-top: -2%" autoresize :option="option6" /></div>
                </div>
              </dv-border-box-13>
            </div>
            <div class="box6">
              <dv-border-box-13>
                <div class="charts-title"><span>>></span>设备可动率</div>
                <div class="chart-a"><e-charts style="height: 24vh;width: 98%" autoresize :option="option7" /></div>
              </dv-border-box-13>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { mapGetters } from 'vuex'
import screenfull from 'screenfull'
const BorderWidth = '6'
const placeHolderStyle = {
  normal: {
    label: {
      show: false,
      position: 'center'
    },
    labelLine: {
      show: false
    },
    color: '#0e2f94',
    borderColor: 'rgba(0,0,0,0)'
    // borderWidth: 50
  },
  emphasis: {
    color: '#dedede',
    borderColor: '#dedede',
    borderWidth: 0
  }
}
export default {
  data() {
    return {
      fullscreenFlag: false
    }
  },
  computed: {
    ...mapGetters([
      'roles'
    ]),
    option() {
      return {
        color: ['#ff0101', '#ff7e00', '#e5cf10', '#23c668', '#02a1e5'],
        legend: {
          show: true,
          orient: 'vertical',
          right: 'right',
          top: 'middle',
          data: ['冲压', '涂装', '车身', '总装', '质量'],
          itemHeight: 5,
          right: 1,
          textStyle: {
            color: '#00deff',
            fontSize: 12
          }
        },
        series: [{
          name: '冲压',
          type: 'pie',
          legendHoverLink: false,
          clockWise: true, // 顺时加载
          hoverAnimation: false, // 鼠标移入变大
          radius: [78, 79],
          itemStyle: {
            normal: {
              label: {
                show: false,
                position: 'outside'
              },
              labelLine: {
                show: false,
                length: 100,
                smooth: 0.5
              },
              borderWidth: BorderWidth,
              shadowBlur: 40,
              borderColor: '#ff0101',
              shadowColor: 'rgba(0, 0, 0, 0)' // 边框阴影
            }
          },
          data: [{
            value: 7,
            name: '70%'
          },
            {
              value: 3,
              name: '',
              itemStyle: placeHolderStyle
            }
          ]
        }, {
          name: '涂装',
          type: 'pie',
          legendHoverLink: false,
          clockWise: true,
          hoverAnimation: false,
          radius: [68, 69],
          itemStyle: {
            normal: {
              label: {
                show: false
              },
              labelLine: {
                show: false,
                length: 100,
                smooth: 0.5
              },
              borderWidth: BorderWidth,
              shadowBlur: 40,
              borderColor: '#ff7e00',
              shadowColor: 'rgba(0, 0, 0, 0)' // 边框阴影
            }
          },
          data: [{
            value: 6,
            name: '60%'
          },
            {
              value: 4,
              name: '',
              itemStyle: placeHolderStyle
            }
          ]
        }, {
          name: '车身',
          type: 'pie',
          legendHoverLink: false,
          clockWise: true,
          hoverAnimation: false,
          radius: [58, 59],
          itemStyle: {
            normal: {
              label: {
                show: false
              },
              labelLine: {
                show: false,
                length: 100,
                smooth: 0.5
              },
              borderWidth: BorderWidth,
              shadowBlur: 40,
              borderColor: '#e5cf10',
              shadowColor: 'rgba(0, 0, 0, 0)' // 边框阴影
            }
          },
          data: [{
            value: 5,
            name: '40%'
          },
            {
              value: 5,
              name: '',
              itemStyle: placeHolderStyle
            }
          ]
        }, {
          name: '总装',
          type: 'pie',
          legendHoverLink: false,
          clockWise: true,
          hoverAnimation: false,
          radius: [48, 49],
          itemStyle: {
            normal: {
              label: {
                show: false
              },
              labelLine: {
                show: false,
                length: 100,
                smooth: 0.5
              },
              borderWidth: BorderWidth,
              shadowBlur: 40,
              borderColor: '#23c668',
              shadowColor: 'rgba(0, 0, 0, 0)' // 边框阴影
            }
          },
          data: [{
            value: 5,
            name: '30%'
          },
            {
              value: 5,
              name: '',
              itemStyle: placeHolderStyle
            }
          ]
        }, {
          name: '质量',
          type: 'pie',
          legendHoverLink: false,
          clockWise: true,
          hoverAnimation: false,
          radius: [38, 39],
          itemStyle: {
            normal: {
              label: {
                show: false
              },
              labelLine: {
                show: false,
                length: 100,
                smooth: 0.5
              },
              borderWidth: BorderWidth,
              shadowBlur: 40,
              borderColor: '#02a1e5',
              shadowColor: 'rgba(0, 0, 0, 0)' // 边框阴影
            }
          },
          data: [{
            value: 4,
            name: '30%'
          },
            {
              value: 6,
              name: '',
              itemStyle: placeHolderStyle
            }
          ]
        }]
      }
    },
    option1() {
      return {
        title: {
          text: ''
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          itemHeight: 5,
          top: 30,
          textStyle: {
            color: '#00deff',
            fontSize: 12
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'value',
            min: 0,
            max: 80,
            position: 'right',
            axisLabel: { // y轴文字的配置
              textStyle: {
                color: '#00deff' // Y轴内容文字颜色
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#253156'
              }
            }
          },
          {
            type: 'value',
            min: 0,
            max: 80,
            axisLabel: { // y轴文字的配置
              textStyle: {
                color: '#00deff' // Y轴内容文字颜色
              }
            },
            position: 'left',
            splitLine: {
              show: true,
              lineStyle: {
                color: '#253156'
              }
            }
          }
        ],
        yAxis: [
          {
            nameTextStyle: { // 关键代码
              padding: [-50, 0, 10, 0],
              color: '#00deff'
            },
            type: 'category',
            data: ['质量', '生管', '动力', '冲压', '总装', '车身', '涂装'],
            axisLabel: { // y轴文字的配置
              textStyle: {
                color: '#00deff' // Y轴内容文字颜色
              }
            }
          },
          {
            type: 'category',
            nameTextStyle: { // 关键代码
              color: '#00deff'
            },
            position: 'right',
            axisLabel: { // y轴文字的配置
              textStyle: {
                color: '#00deff' // Y轴内容文字颜色
              }
            }
          }
        ],
        series: [
          {
            name: '停线时间',
            type: 'bar',
            data: [50, 60, 30, 50, 110, 40, 10],
            barWidth: '20%',
            itemStyle: {
              color: '#53f1f2', // 柱条颜色
              borderType: 'dashed' // 柱条描边类型，默认值'solid'；可取值'solid', 'dashed', 'dotted'
            }
          },
          {
            name: '维护费用',
            type: 'bar',
            data: [66, 20, 60, 50, 61, 102, 50],
            barWidth: '20%',
            itemStyle: {
              color: '#faa234', // 柱条颜色
              borderType: 'dashed' // 柱条描边类型，默认值'solid'；可取值'solid', 'dashed', 'dotted'
            }
          }
        ]
      }
    },
    option2() {
      return {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: ['车身', '总装', '涂装', '冲压', '动力', '生管'],
            axisTick: {
              alignWithLabel: true
            },
            axisLabel: { // y轴文字的配置
              textStyle: {
                color: '#00deff' // Y轴内容文字颜色
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '单位（次）',
            min: 0,
            max: 250,
            nameTextStyle: { // 关键代码
              padding: [-50, 0, 10, 500],
              color: '#00deff'
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#253156'
              }
            },
            axisLabel: { // y轴文字的配置
              textStyle: {
                color: '#00deff' // Y轴内容文字颜色
              }
            }
          }
        ],
        series: [
          {
            name: 'Direct',
            type: 'bar',
            barWidth: '60%',
            data: [
              {
                value: 99,
                itemStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: '#047fdd' },
                    { offset: 0.5, color: '#264dd6' },
                    { offset: 1, color: '#3c2bd1' }
                  ])
                }
              },
              {
                value: 200,
                itemStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: '#fdd401' },
                    { offset: 0.5, color: '#fdb602' },
                    { offset: 1, color: '#fc9701' }
                  ])
                }
              },
              {
                value: 102,
                itemStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: '#64dee3' },
                    { offset: 0.5, color: '#3ab5e1' },
                    { offset: 1, color: '#0685de' }
                  ])
                }
              },
              {
                value: 66,
                itemStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: '#ff971a' },
                    { offset: 0.5, color: '#fe661b' },
                    { offset: 1, color: '#fe441b' }
                  ])
                }
              },
              {
                value: 33,
                itemStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: '#affdcf' },
                    { offset: 0.5, color: '#54d98c' },
                    { offset: 1, color: '#2ac96b' }
                  ])
                }
              },
              {
                value: 12,
                itemStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: '#047fdd' },
                    { offset: 0.5, color: '#264dd6' },
                    { offset: 1, color: '#3c2bd1' }
                  ])
                }
              }
            ]
          }
        ]
      }
    },
    option3() {
      return {
        tooltip: {
          trigger: 'item',
          axisPointer: { // 坐标轴指示器
            type: 'cross' // 十字准星指示器
            // label:{
            //     backgroundColor:'#ccc'
            // }
          }
        },
        legend: {
          data: ['年度维修费用', '每月计划维修费用', '每周实际花费', '每月实际花费'],
          textStyle: {
            color: '#00deff',
            fontSize: 12
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {
              show: false
            }
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          axisLabel: { // y轴文字的配置
            textStyle: {
              color: '#00deff' // Y轴内容文字颜色
            }
          },
          data: ['冲压车间', '焊装车间', '涂装车间', '总装车间', '动力车间', '生产管理部', '质量部']
        },
        yAxis: {
          name: '（万元）',
          min: 0,
          max: 300,
          nameTextStyle: { // 关键代码
            color: '#00deff'
          },
          type: 'value',
          splitLine: {
            show: true,
            lineStyle: {
              color: '#253156'
            }
          },
          axisLabel: { // y轴文字的配置
            textStyle: {
              color: '#00deff' // Y轴内容文字颜色
            }
          }
        },
        series: [
          {
            name: '年度维修费用',
            type: 'line',
            symbol: 'none', // 设置拐点为实心圆
            itemStyle: {
              normal: {
                color: '#24c467',
                lineStyle: {
                  color: '#24c467',
                  width: 0
                },
                areaStyle: { // 添加背景颜色
                  type: 'default',
                  color: '#24c467', // 背景颜色
                  opacity: 0.5 // 透明度
                }
              }
            },
            data: [980, 888, 1200, 888, 1200, 1555, 1380]
          },
          {
            name: '每月计划维修费用',
            type: 'line',
            symbolSize: 5, // 设置折线上圆点大小
            symbol: 'none', // 设置拐点为实心圆
            itemStyle: {
              normal: {
                color: '#faa234',
                lineStyle: {
                  color: '#faa234',
                  width: 0
                },
                areaStyle: { // 添加背景颜色
                  type: 'default',
                  color: '#faa234', // 背景颜色
                  opacity: 0.5 // 透明度
                }
              }
            },
            data: [155, 189, 110, 100, 100, 90, 90]
          },
          {
            name: '每周实际花费',
            type: 'line',
            symbol: 'none', // 设置拐点为实心圆
            itemStyle: {
              normal: {
                color: '#00deff',
                lineStyle: {
                  color: '#00deff',
                  width: 0
                },
                areaStyle: { // 添加背景颜色
                  type: 'default',
                  color: '#00deff', // 背景颜色
                  opacity: 0.5 // 透明度
                }
              }
            },
            data: [20, 28.5, 22.5, 18.5, 25, 32, 28.7]
          },
          {
            name: '每月实际花费',
            type: 'line',
            stack: '总览',
            symbol: 'none', // 设置拐点为实心圆
            itemStyle: {
              normal: {
                color: '#fe0000',
                lineStyle: {
                  color: '#fe0000',
                  width: 0
                },
                areaStyle: { // 添加背景颜色
                  type: 'default',
                  color: '#fe0000', // 背景颜色
                  opacity: 0.5 // 透明度
                }
              }
            },
            data: [80, 113.8, 90.6, 74, 100, 129.5, 115]
          }
        ]
      }
    },
    option4() {
      return {
        legend: {
          itemHeight: 5,
          itemWidth: 15,
          top: 20,
          textStyle: {
            color: '#00deff',
            fontSize: 12
          }
        },
        tooltip: {},
        dataset: {
          source: [
            ['product', '待办', '完成', '超时', '申请停产', '停产审核'],
            ['车身', 43.3, 90.8, 12.7, 34.5, 25.8],
            ['总装', 45, 85.8, 5.7, 45.5, 18.8],
            ['涂装', 18, 88.8, 3.7, 26.5, 12.8],
            ['冲压', 22, 68.8, 12.7, 46.5, 30.8],
            ['动力', 23, 98.8, 6.7, 36.5, 26.8],
            ['生管', 25, 75.8, 2.7, 12.5, 10.8],
            ['质量', 19.3, 85.8, 8.7, 30.5, 12.8]
          ]
        },
        xAxis: {
          type: 'category',
          axisLabel: { // y轴文字的配置
            textStyle: {
              color: '#00deff' // Y轴内容文字颜色
            }
          }
        },
        yAxis: {
          splitLine: {
            show: true,
            lineStyle: {
              color: '#253156'
            }
          },
          type: 'value',
          axisLabel: { // y轴文字的配置
            textStyle: {
              color: '#00deff' // Y轴内容文字颜色
            },
            formatter: '{value} %'
          }
        },
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [
          {
            type: 'bar',
            barWidth: '14%',
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#047fdd' },
                { offset: 0.5, color: '#264dd6' },
                { offset: 1, color: '#3c2bd1' }
              ])
            }
          },
          {
            type: 'bar',
            barWidth: '14%',
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#fdd401' },
                { offset: 0.5, color: '#fdb602' },
                { offset: 1, color: '#fc9701' }
              ])
            }
          },
          {
            type: 'bar',
            barWidth: '14%',
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#64dee3' },
                { offset: 0.5, color: '#3ab5e1' },
                { offset: 1, color: '#0685de' }
              ])
            }
          },
          {
            type: 'bar',
            barWidth: '14%',
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#ff971a' },
                { offset: 0.5, color: '#fe661b' },
                { offset: 1, color: '#fe441b' }
              ])
            }
          },
          {
            type: 'bar',
            barWidth: '14%',
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#affdcf' },
                { offset: 0.5, color: '#54d98c' },
                { offset: 1, color: '#2ac96b' }
              ])
            }
          }
        ]
      }
    },
    option5() {
      return {
        title: {
          text: ''
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['工厂', '指标'],
          textStyle: {
            color: '#fff',
            fontSize: 12
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {
              show: false
            }
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          axisLabel: { // y轴文字的配置
            textStyle: {
              color: '#00deff' // Y轴内容文字颜色
            }
          },
          data: ['一月', '四月', '八月', '十二月']
        },
        yAxis: {
          type: 'value',
          name: '分钟',
          min: 0,
          max: 150,
          nameTextStyle: { // 关键代码
            color: '#00deff'
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#253156'
            }
          },
          axisLabel: { // y轴文字的配置
            textStyle: {
              color: '#00deff' // Y轴内容文字颜色
            }
          }
        },
        series: [
          {
            name: '工厂',
            type: 'line',
            data: [90, 50, 88, 80, 70, 80, 110]
          },
          {
            name: '指标',
            type: 'line',
            data: [65, 55, 56, 66, 38, 40, 66]
          }
        ]
      }
    },
    option6() {
      return {
        title: {
          text: ''
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['工厂', '指标'],
          textStyle: {
            color: '#fff',
            fontSize: 12
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {
              show: false
            }
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          axisLabel: { // y轴文字的配置
            textStyle: {
              color: '#00deff' // Y轴内容文字颜色
            }
          },
          data: ['一月', '四月', '八月', '十二月']
        },
        yAxis: {
          type: 'value',
          name: '分钟',
          min: 0,
          max: 150,
          nameTextStyle: { // 关键代码
            color: '#00deff'
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#253156'
            }
          },
          axisLabel: { // y轴文字的配置
            textStyle: {
              color: '#00deff' // Y轴内容文字颜色
            }
          }
        },
        series: [
          {
            name: '工厂',
            type: 'line',
            data: [120, 50, 59, 66, 48, 32, 110]
          },
          {
            name: '指标',
            type: 'line',
            data: [120, 55, 56, 48, 38, 11, 66]
          }
        ]
      }
    },
    option7() {
      return {
        tooltip: {
          trigger: 'item',
          axisPointer: { // 坐标轴指示器
            type: 'cross' // 十字准星指示器
            // label:{
            //     backgroundColor:'#ccc'
            // }
          }
        },
        legend: {
          data: ['指标', '工厂'],
          itemHeight: 1,
          itemWidth: 14,
          icon: 'rect',
          textStyle: {
            color: '#00deff',
            fontSize: 12
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {
              show: false
            }
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          axisLabel: { // y轴文字的配置
            textStyle: {
              color: '#00deff' // Y轴内容文字颜色
            }
          },
          data: ['一月', '三月', '五月', '七月', '九月', '十一月']
        },
        yAxis: {
          min: 0,
          max: 100,
          nameTextStyle: { // 关键代码
            color: '#00deff'
          },
          type: 'value',
          splitLine: {
            show: true,
            lineStyle: {
              color: '#253156'
            }
          },
          axisLabel: { // y轴文字的配置
            textStyle: {
              color: '#00deff' // Y轴内容文字颜色
            },
            formatter: '{value} %'
          }
        },
        series: [
          {
            name: '指标',
            type: 'line',
            itemStyle: {
              color: '#faa234',
              normal: {
                color: '#faa234',
                lineStyle: {
                  color: '#faa234',
                  width: 0
                },
                areaStyle: { // 添加背景颜色
                  type: 'default',
                  color: '#faa234', // 背景颜色
                  opacity: 0.5 // 透明度
                }
              }
            },
            data: [40, 50, 60, 50, 60, 50, 60]
          },
          {
            name: '工厂',
            type: 'line',
            symbolSize: 5, // 设置折线上圆点大小
            symbol: 'none', // 设置拐点为实心圆
            itemStyle: {
              normal: {
                color: '#24c467',
                lineStyle: {
                  color: '#24c467',
                  width: 0
                },
                areaStyle: { // 添加背景颜色
                  type: 'default',
                  color: '#24c467', // 背景颜色
                  opacity: 0.5 // 透明度
                }
              }
            },
            data: [30, 20, 40, 80, 40, 65, 80]
          }
        ]
      }
    },
    option14() {
      return {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        grid: {
          right: '20%'
        },
        legend: {
          data: ['次数', '时间'],
          textStyle: {
            color: '#00deff',
            fontSize: 12
          }
        },
        xAxis: [
          {
            type: 'category',
            axisLabel: { // y轴文字的配置
              textStyle: {
                color: '#00deff' // Y轴内容文字颜色
              }
            },
            axisTick: {
              alignWithLabel: false
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#253156'
              }
            },
            data: ['冲压', '车身', '涂装', '总装', '动力']
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '时间/分钟',
            axisLine: {
              lineStyle: {
                color: '#00deff'
              }
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: '#253156'
              }
            },
            axisLabel: { // y轴文字的配置
              textStyle: {
                color: '#00deff' // Y轴内容文字颜色
              }
            }
          },
          {
            type: 'value',
            name: '次数/次',
            min: 0,
            max: 50,
            axisLine: {
              lineStyle: {
                color: '#00deff'
              }
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: '#253156'
              }
            },
            axisLabel: { // y轴文字的配置
              textStyle: {
                color: '#00deff' // Y轴内容文字颜色
              }
            }
          }
        ],
        series: [
          {
            name: '时间',
            type: 'bar',
            barWidth: 18,
            tooltip: {
              valueFormatter: function(value) {
                return value + '分钟'
              }
            },
            itemStyle: {
              normal: {
                color: function(params) {
                  const colorList = [
                    ['#047fdd', '#264dd6', '#3c2bd1'],
                    ['#fdd401', '#fdb602', '#fc9701'],
                    ['#64dee3', '#3ab5e1', '#0685de'],
                    ['#ff971a', '#fe661b', '#fe441b'],
                    ['#affdcf', '#54d98c', '#2ac96b'],
                    ['#047fdd', '#264dd6', '#3c2bd1'],
                    ['#fdd401', '#fdb602', '#fc9701'],
                    ['#64dee3', '#3ab5e1', '#0685de'],
                    ['#ff971a', '#fe661b', '#fe441b'],
                    ['#affdcf', '#54d98c', '#2ac96b'],
                    ['#047fdd', '#264dd6', '#3c2bd1'],
                    ['#fdd401', '#fdb602', '#fc9701']
                  ]
                  let index = colorList[params.dataIndex]
                  if (params.dataIndex >= colorList.length) {
                    index = params.dataIndex - colorList.length
                  }
                  return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: index[0]
                    },
                    {
                      offset: 0.5,
                      color: index[1]
                    },
                    {
                      offset: 1,
                      color: index[2]
                    }
                  ], false)
                }
              }
            },
            data: [107, 125, 78, 92, 110]
          },
          {
            name: '次数',
            type: 'line',
            data: [6, 10, 8, 17, 9],
            tooltip: {
              valueFormatter: function(value) {
                return value + '次'
              }
            }
          }
        ]
      }
    },
    option15() {
      return {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        grid: {
          right: '20%'
        },
        legend: {
          data: ['次数', '费用'],
          textStyle: {
            color: '#00deff',
            fontSize: 12
          }
        },
        xAxis: [
          {
            type: 'category',
            axisLabel: { // y轴文字的配置
              textStyle: {
                color: '#00deff' // Y轴内容文字颜色
              }
            },
            axisTick: {
              alignWithLabel: false
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#253156'
              }
            },
            data: ['冲压', '车身', '涂装', '总装', '动力']
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '费用/万元',
            axisLine: {
              lineStyle: {
                color: '#00deff'
              }
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: '#253156'
              }
            },
            axisLabel: { // y轴文字的配置
              textStyle: {
                color: '#00deff' // Y轴内容文字颜色
              }
            }
          },
          {
            type: 'value',
            name: '次数/次',
            min: 0,
            max: 50,
            axisLine: {
              lineStyle: {
                color: '#00deff'
              }
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: '#253156'
              }
            },
            axisLabel: { // y轴文字的配置
              textStyle: {
                color: '#00deff' // Y轴内容文字颜色
              }
            }
          }
        ],
        series: [
          {
            name: '费用',
            type: 'bar',
            barWidth: 18,
            tooltip: {
              valueFormatter: function(value) {
                return value + '万元'
              }
            },
            itemStyle: {
              normal: {
                color: function(params) {
                  const colorList = [
                    ['#047fdd', '#264dd6', '#3c2bd1'],
                    ['#fdd401', '#fdb602', '#fc9701'],
                    ['#64dee3', '#3ab5e1', '#0685de'],
                    ['#ff971a', '#fe661b', '#fe441b'],
                    ['#affdcf', '#54d98c', '#2ac96b'],
                    ['#047fdd', '#264dd6', '#3c2bd1'],
                    ['#fdd401', '#fdb602', '#fc9701'],
                    ['#64dee3', '#3ab5e1', '#0685de'],
                    ['#ff971a', '#fe661b', '#fe441b'],
                    ['#affdcf', '#54d98c', '#2ac96b'],
                    ['#047fdd', '#264dd6', '#3c2bd1'],
                    ['#fdd401', '#fdb602', '#fc9701']
                  ]
                  let index = colorList[params.dataIndex]
                  if (params.dataIndex >= colorList.length) {
                    index = params.dataIndex - colorList.length
                  }
                  return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: index[0]
                    },
                    {
                      offset: 0.5,
                      color: index[1]
                    },
                    {
                      offset: 1,
                      color: index[2]
                    }
                  ], false)
                }
              }
            },
            data: [107, 625, 378, 192, 110]
          },
          {
            name: '次数',
            type: 'line',
            data: [26, 120, 28, 127, 9],
            tooltip: {
              valueFormatter: function(value) {
                return value + '次'
              }
            }
          }
        ]
      }
    }
  },
  created() {

  },
  methods: {
    info() {
      screenfull.toggle()
      this.$router.push('/newCharts/indexFull')
    }
  }
}
</script>
<style scoped>
.charts{
  width: 100%;
  height: calc(100vh - 30px);
  margin-top: -10px;
  background-size: 100% 100%;
  background-color: #0c1330;
  background-repeat: no-repeat;
  overflow: hidden;
}
.full{
  position: fixed;
  cursor:pointer;
  color: #00deff;
  font-size: 16px;
  /*border: 1px solid #00deff;*/
  margin-left: 3vw;
  margin-top: -70px;
  width: 100px;
  height: 40px;
  text-align: center;
  line-height: 2.6;
}
.top-border{
  display: flex;
}
.c-title{
  font-size: 28px;
  color: #00deff;
  text-align: center;
}
.box1{
  height: 30vh;
}
.box2{
  height: 52vh;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
}
.box3{
  height: 50vh;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.box4{
  height: 30vh;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.box5{
  height: 50vh;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: space-between ;
}
.box6{
  height: 30vh;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.charts-title{
  color: #21b7b5;
  padding-top: 20px;
  margin-left: 12px;
}
.PM{
  width: 100%;
  height: 100%;
}
.charts1{
  margin-left: -10%;
  margin-top: -4%;
}
.charts2{
  height: 22vh;
  width: 98%;
}
.charts-title span{
  width: 100px;
  height: 30vh;
  background-size: 100% 100%;
  background-color: #0c1330;
  background-repeat: no-repeat;
}
.charts-all{
  height: 100%;
  padding: 0 1vw 0;
}
.box-a{
  height: 82vh;
  display: flex;
  flex-direction:column;
  justify-content: space-between;
}
.box-b{
  height: 82vh;
  display: flex;
  flex-direction:column;
  justify-content: space-between;
}
.box-c{
  height: 82vh;
  display: flex;
  flex-direction:column;
  justify-content: space-between;
}
.m-title h1{
  color: #fff;
  text-align: center;
  font-size: 24px;
  padding-top: 40px;
}
.m-title span{
  display: inline-block;
  padding: 4px 8px ;
  background-image: linear-gradient(#0ca1bd, #0ccfb1);
  margin-right: 8px;
}
.m-title b{
  font-size: 18px;
  font-weight: normal;
}
.chart-a{
  width: 100%;
  height: 100%;
}
.charts img {
  position: fixed;
  left: 18px;
  top:20px
}
</style>
<style>
.handle-button{
  display: block;
}
</style>
